<template>
  <div class="online-message">
    <div class="online-message-title">在线留言</div>
    <el-form class="online-message-form" ref="form" :rules="rules" label-position="right" label-width="80px" :model="form">
      <el-form-item label="姓名" prop="msgName">
        <el-input v-model="form.msgName"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="msgEmail">
        <el-input v-model="form.msgEmail"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="msgTel">
        <el-input v-model="form.msgTel"></el-input>
      </el-form-item>
      <el-form-item label="留言板" prop="msgContent">
        <el-input type="textarea" :autosize="{minRows:6}" v-model="form.msgContent"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api from '../api';
function getNowFormatDate() {
  const date = new Date();
  const seperator1 = '-';
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
    month = '0' + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = '0' + strDate;
  }
  const currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
  return currentdate;
}

export default {
  name: 'online-message',
  data() {
    const validateTel = (rule, value, callback) => {
      const regStr = /^[1-9]\d*$/; // 只能为正整数
      if (value.match(regStr) && value.length === 11) {
        callback();
      }
      callback(new Error('联系方式格式不正确，请检查后再输入'));
    };
    return {
      form: {
        msgName: '',
        msgEmail: '',
        msgTel: '',
        msgTime: getNowFormatDate(),
        msgContent: ''
      },
      rules: {
        msgName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        msgTel: [{ required: true, validator: validateTel, trigger: 'blur' }],
        msgEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        msgContent: [{ required: true, message: '请输入留言内容', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.addMessage(this.form).then(() => {
            this.$message({
              type: 'success',
              message: '留言成功'
            });
            this.form = {
              msgName: '',
              msgEmail: '',
              msgTel: '',
              msgTime: getNowFormatDate(),
              msgContent: ''
            };
          });
        } else {
          this.$message({
            type: 'warning',
            message: '留言失败'
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped lang="scss">
  .online-message {
    width: 50%;
    margin: 0 auto;
    margin-top: 40px;
    &-title {
      font-size: 28px;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px dotted #db9d36;
    }
    &-form {
      margin-top: 20px;
    }
  }
</style>
